<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="80px">
      <el-row>
        <el-col :span="4">
          <el-form-item label="开始时间">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.startTime" style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="结束时间">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.endTime" style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="维度">
            <el-select v-model="form.dimension" placeholder="请选择维度">
              <el-option label="按日统计" value="day"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label="学科">
            <el-select v-model="form.subjectId" placeholder="学科">
              <el-option
                v-for="item in subjectsList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label="校区">
            <el-select v-model="form.campusId"
                       @change="campusHandleChange"
                       placeholder="校区">
              <el-option
                v-for="item in campusList"
                :key="item.id"
                :label="item.campusName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item>
            <el-button type="primary" @click="onSubmit">搜索</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item>
            <el-button type="primary" @click="createOptions">曲线图</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div align="center">
      <el-table
        :data="tableData"
        border
        style="width: 1100px">
        <el-table-column
          prop="tableTime"
          align="center"
          label="统计维度"
          width="550px">
        </el-table-column>
        <el-table-column
          prop="numberOfStudent"
          align="center"
          label="报名人数"
          width="550px">
        </el-table-column>
      </el-table>
    </div>
    <div align="center" style="margin-top: 20px">
      曲线图
    </div>
    <div id="main" ref="chartContainer" style="width: 100%; height: 400px;margin-top: 20px" >
      <div>
        <line-chart></line-chart>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import {getCampusList, getStudentsByFormData} from "@/api/student/student";
export default {
  data() {
    return {
      campusList: [],
      subjectsList: [],
      tableData: [],
      xData: [],
      yData: [],
      form:{
        startTime: null,
        endTime: null,
        dimension: null,
        date: null,
        number: null,
        subjectId: null,
        campusId: null,
      },
      chartInstance: null,
      options: {
        tooltip: {},
        xAxis: {
          type: 'category',
          data: this.xData,
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '数据系列',
            type: 'line',
            data: this.yData,
          },
        ],
      },
    };
  },
  created() {
    this.getListCampus();
  },
  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    this.disposeChart();
  },
  methods: {
    initChart() {
      this.chartInstance = echarts.init(this.$refs.chartContainer);
      this.chartInstance.setOption(this.options);

    },
    disposeChart() {
      if (this.chartInstance) {
        this.chartInstance.dispose();
        this.chartInstance = null;
      }
    },
    //选中校区获取学科
    campusHandleChange(res) {
      for (let i = 0; i < this.campusList.length; i++) {
        if (this.campusList[i].id == res) {
          this.subjectsList = this.campusList[i].subjects;
          this.form.campus = this.campusList[i].campusName;
          return;
        }
      }
    },
    //查询校区
    getListCampus() {
      getCampusList().then(res => {
        let {code, rows} = res;
        if (code == 200) {
          this.campusList = rows;
        }
      })
    },
    //搜索按钮
    onSubmit(){
      this.tableData = [];
      getStudentsByFormData(this.form).then(response => {
        this.tableData = response.rows;
      });
    },
    createOptions(){
      this.xData = [];
      this.yData = [];
      this.tableData.forEach(td => {
        this.xData.push(td.tableTime);
        this.yData.push(td.numberOfStudent);
      })
      const myChart = echarts.init(document.getElementById("main"));

      if (this.tableData) { // 如果已经获取到数据，则更新图表
        myChart.setOption(this.createOptions1());
      }

      // 监听数据变化，动态更新图表
      this.$watch('tableData', () => {
        if (myChart && this.tableData) {
          myChart.setOption(this.createOptions1());
        }
      }, { deep: true });
    },
    createOptions1() {
      return {
        tooltip: {
          trigger: "axis"
        },
        xAxis: {
          type: "category",
          data: this.xData // 使用后端返回的x轴数据
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "数据系列",
            type: "line",
            data: this.yData // 使用后端返回的y轴数据
          }
        ]
      };
    }
  }
};
</script>

